<section class="py-6" [ngClass]="['bg' + default, 'text' + contrastInv]">
	<div
		class="container mx-auto flex flex-col items-center justify-center max-w-lg p-4 lg:max-w-full sm:p-10 lg:flex-row"
	>
		<div
			class="flex flex-col items-center justify-center flex-1 p-4 pb-8 sm:p-8 lg:p-16"
			[ngClass]="['bg' + contrast]"
		>
			<span class="text-sm">Basic</span>
			<p class="text-5xl font-bold text-center">39€</p>
			<p class="font-semibold text-center">
				Nemo deserunt possimus quo provident recusandae! Dolores qui architecto omnis
				pariatur eos voluptatibus sequi cum, non nesciunt aspernatur a?
			</p>
			<button
				class="px-8 py-3 mt-6 text-lg font-semibold border rounded sm:mt-12"
				[ngClass]="['border' + neutral]"
			>
				Sign up
			</button>
		</div>
		<div
			class="flex flex-col items-center justify-center flex-1 p-4 pb-8 text-center rounded-md sm:p-8 lg:p-16"
			[ngClass]="['bg' + primary, 'text' + contrast]"
		>
			<span class="text-sm font-semibold">Advanced</span>
			<p class="text-5xl font-bold">89€</p>
			<p class="font-semibold">
				Nemo deserunt possimus quo provident recusandae! Dolores qui architecto omnis
				pariatur eos voluptatibus sequi cum, non nesciunt aspernatur a?
			</p>
			<button
				class="px-8 py-3 mt-6 text-lg font-semibold rounded sm:mt-12"
				[ngClass]="['bg' + default, 'text' + contrastInv]"
			>
				Sign up
			</button>
		</div>
	</div>
</section>
